// 实现标签页的切换
function initSwitchTab() {
//     获取相关元素
    let tableSession = document.querySelector('.tab .tab-session');
    let tableFriend = document.querySelector('.tab .tab-friend');
    // querySelectorAll同时选中多个元素,得到的结果是一个数组
    //[0]   会话列表
    //[1]   好友列表
    let lists = document.querySelectorAll('.list');
//     针对标签按钮注册点击事件
    tableSession.onclick = function () {
        //     设置图标
        tableSession.style.backgroundImage = 'url(image/对话.png)';
        tableFriend.style.backgroundImage = 'url(image/用户2.png)';
        //     显示会话列表,隐藏好友列表
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }
    tableFriend.onclick = function () {
        //     设置图标
        tableSession.style.backgroundImage = 'url(image/对话2.png)';
        tableFriend.style.backgroundImage = 'url(image/用户.png)';
        //     显示好友列表,隐藏会话列表
        lists[1].classList = 'list';
        lists[0].classList = 'list hide';
    }
}

initSwitchTab();

//从服务器获取用户登录数据
function getUserInfo() {
    $.ajax({
        type: "GET",
        url: "/userInfo",
        success: function (body) {
            if (body.code == 1) {
                // alert("登录成功")
                let userDiv = document.querySelector(('.main .left .user'));
                userDiv.innerHTML = body.data.username;
                // alert(body.data.username)
                userDiv.setAttribute('use-id', body.data.id);
            } else if (body.code == 0) {
                alert("用户未登录")
                location.assign('login.html')
            }

        }
    })
}

getUserInfo();

//从服务器获取好友列表数据
function getFriendList() {
    $.ajax({
        type: "GET",
        url: "/friendList",
        success: function (body) {
            if (body.code == 0) {
                alert('获取好友列表失败')
            } else {
                let friendList = document.querySelector('#friend-list');
                // 清空原有内容
                friendList.innerHTML = "";
                for (let friend of body.data) {
                    let li = document.createElement('li');
                    li.innerHTML = '<h4>' + friend.friendName + '</h4>';
                    friendList.appendChild(li);
                    li.onclick = function () {
                        // 参数用于区分点击了哪个好友
                        clickFriend(friend);
                    }
                }
            }
        }
    })
}

getFriendList();

function getSessionList() {
    $.ajax({
        type: 'get',
        url: '/sessionList',
        success: function (body) {
            let sessionList = document.querySelector('#session-list');
            sessionList.innerHTML = '';
            for (let session of body) {
                if (session.lastMessage > 10) {
                    // 如果消息太⻓了, 就在预览窗⼝中截断.
                    session.lastMessage = session.lastMessage.substring(0, 10)
                        + '...';
                }
                let li = document.createElement('li');
                // 通过⾃定义属性, 保存必要的信息. 以备后⾯使⽤.
                li.setAttribute('message-session-id', session.sessionId);
                li.innerHTML = '<h3>' + session.friends[0].friendName + '</h3>'
                    + '<p>' + (session.lastMessage || '') + '</p>';
                sessionList.appendChild(li);
                // 增加点击事件的处理.
                li.onclick = function () {
                    clickSession(li);
                }
            }
            getAddFriendRequest();
        },
        error: function () {
            alert('获取会话列表失败!');
        }
    })
}

getSessionList();

function clickSession(currentLi) {
//     1.设置选中状态
    let allList = document.querySelectorAll('#session-list > li');
    activeSession(allList, currentLi);
//     2.让会话处于置顶状态
//     sessionList.insertBefore(sessionLi, sessionList.children[0])
//     2.获取指定会话历史消息
    let sessionId = currentLi.getAttribute('message-session-id');
    getHistoryMessage(sessionId);
}

function activeSession(allList, currentLi) {
    // 设置选中的li的状态并清空未选中的li的状态
    for (let li of allList) {
        if (li == currentLi) {
            li.className = 'selected';
        } else {
            li.className = '';
        }
    }
}

function clickFriend(friend) {
//     1.先判定当前好友是否有对应的会话
    let sessionLi = findSessionByName(friend.friendName);
    let sessionList = document.querySelector('#session-list')
    if (sessionLi) {
        // 2. 如果存在匹配的会话, 则直接把这个会话设为选中状态, 并移动到最前⾯
        sessionList.insertBefore(sessionLi, sessionList.children[0])
        // 点击⼀下新的会话, 触发⾼亮和拉取历史消息
        sessionLi.click();
    } else {
        // 3. 如果不存在匹配的会话, 则创建个新的会话, 并加⼊到会话列表最前⾯.
        // 并且通知服务器, 要创建会话了.
        sessionLi = document.createElement('li');
        sessionLi.innerHTML = '<h3>' + friend.friendName + '</h3>'
            + '<p></p>';
        sessionList.insertBefore(sessionLi, sessionList.children[0])
        // 这个操作在实现 clickSession 的时候补充上. 保证新创建的 sessionLi 也能响应
        // 点击事件.
        sessionLi.onclick = function () {
            clickSession(sessionLi);
        }
        // 点击⼀下新的会话, 触发⾼亮和拉取历史消息
        sessionLi.click();
        // 4. 告诉服务器要新增⼀个会话
        createSession(friend.id, sessionLi);
    }
    // 5. 同时切换标签⻚到会话列表
    // 模拟⼀下⿏标点击.
    let tabSession = document.querySelector('.tab-session');
    tabSession.click();
}

function findSessionByName(name) {
    let sessions = document.querySelectorAll('#session-list>li');
    for (let li of sessions) {
        let h3 = li.querySelector('h3');
        if (name == h3.innerHTML) {
            return li;
        }
    }
    return null;
}

function createSession(id, sessionLi) {
    $.ajax({
        type: 'POST',
        url: '/session?toUserId=' + id,
        success: function (body) {
            console.log("创建会话成功! " + body.data.sessionId);
            sessionLi.setAttribute('message-session-id', body.data.sessionId);
        },
        error: function () {
            alert("创建会话失败!");
        }
    });
}

function getHistoryMessage(sessionId) {
    console.log("获取历史消息");
    let titleDiv = document.querySelector('.right> .title');
    let messageShowDiv = document.querySelector('.message-show');

    titleDiv.innerHTML = "";
    messageShowDiv.innerHTML = "";
//     设置会话标题
    let selectedH3 = document.querySelector('#session-list>.selected>h3');
    if (selectedH3) {
        titleDiv.innerHTML = selectedH3.innerHTML.trim()
    }
    if (!sessionId) {
        //     新的会话没有sessionId,则不会获取历史消息
        return;
    }
    $.ajax({
        type: "GET",
        url: "/message?sessionId=" + sessionId,
        success: function (body) {
            //     获取当前用户的用户名
            //     此处获取的selfUserName如果不 .trim(),可能带有很多的换行符,空格等
            for (let message of body.data) {
                addMessage(messageShowDiv, message);
            }
            //     控制滚动条,使滚动条滚动到最下方
            scrollBottom(messageShowDiv);
        },
        error: function () {
            alert("获取历史消息失败!");
        }
    });
}

function addMessage(messageShowDiv, message) {
    let selfUsername = document.querySelector('.user').innerHTML.trim();
    let messageDiv = document.createElement('div');
    if (message.fromName != selfUsername) {
        // 如果消息是别⼈发给⾃⼰的, 就放在左边
        messageDiv.className = 'message message-left';
    } else {
        // 如果消息是⾃⼰发给别⼈的, 就放在右边
        messageDiv.className = 'message message-right';
    }
    messageDiv.innerHTML = '<div class="box">'
        + '<h4>' + message.fromName + ' | ' + message.postTime + '</h4>'
        + '<p>' + message.content + '</p>'
        + '</div>';
    messageShowDiv.appendChild(messageDiv);
}

function scrollBottom(elem) {
    const clientHeight = elem.offsetHeight; // 容器⾼度
    const scrollHeight = elem.scrollHeight; // 内容总⾼度
    // 第⼀个参数是⽔平⽅向滚动的距离, 第⼆个参数是垂直⽅向滚动的距离.
    elem.scrollTo(0, scrollHeight - clientHeight);
}


// websocket
let websocket = new WebSocket("ws://" + location.host + "/WebSocketMessage");
websocket.onopen = function () {
    console.log("连接成功")
}
websocket.onmessage = function(event) {
    console.log('[onmessage] ' + event.data);
    let resp = JSON.parse(event.data);
    if (resp.type == 'message') {
        // 处理消息响应
        handlerMessage(resp);
    } else if (resp.type == 'addFriendRequest') {
        // 处理添加好友请求
        handlerAddFriend(resp);
    } else if (resp.type == 'acceptFriend') {
        // 处理接受好友响应
        handlerAcceptFriend(resp);
    }
}
websocket.onclose = function () {
    console.log("连接断开")
}
websocket.onerror = function () {
    console.log("连接异常")
}
//监听窗口关闭事件,当窗口关闭时,主动区关闭websocket连接,防止还没断开连接就关闭窗口,server会抛异常
websocket.onbeforeunload = function () {
    websocket.close();
}

function handlerMessage(resp) {
    // 1. 根据 resp 中的 sessionId, 找到 session 列表中的元素. 如果不存在, 则创建⼀个
    // 新会话
    let sessionListUL = document.querySelector('#session-list');
    let curSessionLi = findSessionById(resp.sessionId);
    if (curSessionLi == null) {
        // 如果为空, 则创建出⼀个新的会话来.
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id', resp.sessionId);
        curSessionLi.innerHTML = '<h3>' + resp.fromName + '</h3>'
            + '<p></p>';
        curSessionLi.onclick = function () {
            clickSession(curSessionLi);
        }
    }
    // 2. 把新消息显⽰在会话预览栏中.
    let p = curSessionLi.querySelector('p');
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        // 如果消息太⻓了, 就在预览窗⼝中截断.
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }
    // 3. 把会话调整到会话列表最上⽅.
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    // 如果当前会话已经选中, 则
    if (curSessionLi.className == 'selected') {
        // 4. 在消息列表中显⽰新的消息
        let messageShowDiv = document.querySelector('.message-show');
        addMessage(messageShowDiv, resp);
        // 5. 调整滚动条位置.
        scrollBottom(messageShowDiv)
    }
    // [下列功能暂时不做, 留作同学们⾃⾏扩展]
    // 6. 还可以在会话窗⼝上提⽰ 红⾊ 的数字, 表⽰未读消息.
    // 7. 播放消息提⽰⾳效.
}

function findSessionById(targetSessionId) {
    let sessionLis = document.querySelectorAll('#session-list>li');
    for (let sessionLi of sessionLis) {
        let sessionId = sessionLi.getAttribute('message-session-id');
        if (sessionId == targetSessionId) {
            return sessionLi;
        }
    }
    // 正常情况下不会触发这⾥的 return null, 服务器返回的会话是⼀定能找到的.
    return null;
}


//消息发送
function initSendButton() {
    // 拿到发送按钮
    let sendBtn = document.querySelector('.ctrl>button');
    // 拿到消息输⼊框
    let messageInput = document.querySelector('.message-input');
    // 拿到被选中的会话
    // 给 sendBtn 注册点击回调
    sendBtn.onclick = function () {
        // 1. 拿到输⼊框的内容
        let content = messageInput.value;
        if (!content) {
            // 输⼊框为空, 则直接返回, 不做实际处理.
            return;
        }
        // 2. 拿到 sessionId
        let sessionLi = document.querySelector('#session-list .selected');
        if (sessionLi == null) {
            // 当前没有 li 标签被选中.
            return;
        }
        let sessionId = sessionLi.getAttribute('message-session-id');
        // 3. 构造出请求
        let req = {
            type: 'message',
            sessionId: parseInt(sessionId),
            content: content
        };
        req = JSON.stringify(req);
        // 4. 发送请求
        console.log('发送消息: ' + req);
        websocket.send(req);
        // 5. 清空输⼊框
        messageInput.value = '';
    }
}

initSendButton();

// 搜索框搜索用户添加好友

function initFindFriend() {
    let search = document.querySelector('.search');
    let input = document.querySelector('.search>input');
    let button = document.querySelector('.search>button');
    button.onclick = function() {
        // 给服务器发送请求, 获取匹配的好友.
        $.ajax({
            type: 'get',
            url: '/findFriend?name=' + encodeURIComponent(input.value.trim()),
            success: function(body) {
                let titleDiv = document.querySelector('.title');
                titleDiv.innerHTML = '查找结果';
                let messageShowDiv = document.querySelector('.message-show');
                messageShowDiv.innerHTML = '';
                for (let friend of body.data) {
                    let itemDiv = document.createElement('div');
                    itemDiv.className = 'message';
                    let span = document.createElement('span');
                    span.innerHTML = friend.friendName;
                    span.setAttribute('friend-id', friend.id);
                    let input = document.createElement('input');
                    input.type = 'text';
                    input.placeholder = '添加好友理由';
                    let button = document.createElement('button');
                    button.innerHTML = '+';
                    button.onclick = function() {
                        sendAddFriend(friend.id, input.value);
                    }
                    itemDiv.appendChild(span);
                    itemDiv.appendChild(input);
                    itemDiv.appendChild(button);
                    messageShowDiv.appendChild(itemDiv);
                }
            },
            error: function() {
                alert('查找好友失败! name=' + input.value.trim());
            }
        })
    }
}
initFindFriend();
function sendAddFriend(friendId, reason) {
    $.ajax({
        type: 'GET',
        url: 'addFriend?friendId=' + friendId + '&reason=' +
            encodeURIComponent(reason),
        success: function(body) {
            // 啥都不⽤⼲
            alert('添加好友请求已经发送!');
        },
        error: function() {
            alert('添加好友失败!');
        }
    });
}
function getAddFriendRequest() {
    $.ajax({
        type: 'get',
        url: 'getFriendRequest',
        success: function(body) {
            for (let item of body) {
                addFriendRequest(item.fromUserId, item.fromUserName,
                    item.reason);
            }
        },
        error: function() {
            alert('加载添加好友请求失败!');
        }
    });
}
getAddFriendRequest();
function addFriendRequest(fromUserId, fromUserName, reason) {
    let sessionList = document.querySelector('#session-list');
    let li = document.createElement('li');
    li.setAttribute('from-user-id', fromUserId);
    li.style = 'height: 100px';
    let h3 = document.createElement('h3');
    h3.innerHTML = fromUserName;
    let p = document.createElement('p');
    p.innerHTML = reason;
    let rowDiv = document.createElement('div');
    rowDiv.className = 'row';
    let buttonAccept = document.createElement('button');
    buttonAccept.innerHTML = '接受';
    buttonAccept.onclick = function() {
        $.ajax({
            type: 'get',
            url: 'acceptFriend?friendId=' + fromUserId,
            success: function() {
                alert("通过 " + fromUserName + " 的好友申请 处理成功!");
                // 刷新好友列表
                getFriendList();
                // 删除当前的好友请求项
                sessionList.removeChild(li);
            },
            error: function() {
                alert("通过 " + fromUserName + " 的好友申请 处理失败!");
            }
        });
    }
    let buttonReject = document.createElement('button');
    buttonReject.innerHTML = '拒绝';
    buttonReject.onclick = function() {
        // TODO
        $.ajax({
            type: 'get',
            url: 'rejectFriend?friendId=' + fromUserId,
            success: function() {
                alert("拒绝 " + fromUserName + " 的好友申请 处理成功!");
                // 删除当前的好友请求项
                sessionList.removeChild(li);
            },
            error: function() {alert("拒绝 " + fromUserName + " 的好友申请 处理失败!");
            }
        });
    }
    li.appendChild(h3);
    li.appendChild(p);
    rowDiv.appendChild(buttonAccept);
    rowDiv.appendChild(buttonReject);
    li.appendChild(rowDiv);
    sessionList.insertBefore(li, sessionList.children[0]);
}
function handlerAddFriend(resp) {
    // 在会话列表中新增⼀项, 表⽰添加好友请求.
    addFriendRequest(resp.fromUserId, resp.fromUserName, resp.reason);
}
function handlerAcceptFriend(resp) {
    // 1. 刷新好友列表
    getFriendList();
    // 2. 弹框提⽰
    alert(resp.fromUserName + ' 已经通过你的好友申请!');
}